<template>
	<view style="background-color: #fff;">
		<uni-nav-bar left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回" rightText="保存"  title="新增项目"  @clickLeft="back" @clickRight="addBtn" :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	    
		<!-- 列表 -->
		<u--form class="form" labelPosition="left" @click="customerBtn" labelWidth="100px" :model="form" :rules="rules" ref="form">
			<u-form-item label="客户" prop="customerName" borderBottom ref="item1">
				<u--input v-model="form.customerName" border="none"  :readonly="true"></u--input>
				<u-icon slot="right" class="box" @click="customerBtn" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="负责人" prop="userName" borderBottom ref="item1">
				<u--input v-model="form.userName" border="none"  :readonly="true"></u--input>
			</u-form-item>
			<u-form-item label="项目名" prop="projectName" borderBottom ref="item1">
				<u--input v-model="form.projectName" border="none"   placeholder="请输入项目名"  ></u--input>
			</u-form-item>
			<u-form-item label="项目地区域" prop="projectArea" @click="provinceShow=true" borderBottom ref="item1">
				<u--input v-model="form.projectArea" border="none"  :readonly="true"></u--input>
				<u-icon slot="right" class="box" name="arrow-right" @click="provinceShow=true"></u-icon>
			</u-form-item>
			<u-form-item label="项目信息来源"  @click="projectSourceShow=true" prop="Source" borderBottom ref="item1">
				<u--input v-model="form.Source" border="none"  :readonly="true"></u--input>
				<u-icon slot="right" class="box" name="arrow-right" @click="projectSourceShow=true"></u-icon>
			</u-form-item>
			
			<u-form-item label="项目地址" prop="projectAddress" borderBottom ref="item1" @click="projectAddressBtn">
				<u--input v-model="form.projectAddress" border="none"  :readonly="true"></u--input>
				<u-icon slot="right" class="box" name="arrow-right" @click="projectAddressBtn"></u-icon>
			</u-form-item>
			<!-- <u-form-item label="项目详细地址" prop="projectAddress" borderBottom ref="item1">
				<u--input v-model="form.projectAddress" border="none"  :readonly="true"></u--input>
				<u-icon slot="right" class="box" name="arrow-right"></u-icon>
			</u-form-item> -->
			<u-form-item label="项目联系人" prop="receiverName" borderBottom ref="item1">
				<u--input v-model="form.receiverName" border="none"  :readonly="true"></u--input>
				<u-icon slot="right" class="box" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="联系人电话" prop="projectTel" borderBottom ref="item1">
				<u--input v-model="form.projectTel" border="none"  :readonly="true"></u--input>
				<u-icon slot="right" class="box" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<u-toast ref="uToast"></u-toast>
		<u-picker :closeOnClickOverlay="true"  :show="projectSourceShow" :columns="projectSourceOptions" @confirm="confirmFn" keyName="dictLabel" @close="projectSourceShow=false" @cancel="projectSourceShow=false"></u-picker>
		<u-picker :closeOnClickOverlay="true" :show="provinceShow" :columns="provinceListOptions" @confirm="provinceConfirmFn" keyName="text" @close="provinceShow=false" @cancel="provinceShow=false"></u-picker>
	  <!-- 收货地址 -->
	  <uni-data-picker @popupclosed="show=false" v-if="show==true"  v-model='form.projectAddress' @change="onchange" :localdata="items" ref="pick" popup-title="请选择"></uni-data-picker>
	<!-- 提示框 -->
		<u-modal showConfirmButton showCancelButton @confirm="BtnModel" @cancel="BtnShow=false" :show="BtnShow" title="提示" content='是否确认提交?'></u-modal>
	</view>
</template>

<script>
	import {provinceNameList} from '@/api/region/region.js'
	import {getDicts} from '@/api/dictionary/index.js'
	import {addProject} from '@/api/project.js'
	export  default {
		data(){
			return{
				form:{
					 pageSize:10,
					 pageNum:1,
					 customerId:'',
					 customerName:'',//客户姓名
					 userId:'',//用户id
					 userName:'',//用户姓名
					 projectName:'',//项目名称
					 projectAddress:'',//项目地址
					 projectArea:'',//项目区域
					 projectAreaName:'',//项目区域名
					 projectSource:'',//项目来源
					 Source:'',//回显项目来源
					 projectTel:'',//联系人电话
					 receiverName:'',//联系人姓名
				},
				items:[],
				BtnShow:false,
				rules:{
					customerName:[{type: 'string',required: true,message: '请选择客户',trigger: ['blur', 'change']}],
					projectName:[{type: 'string',required: true,message: '请填写项目名',trigger: ['blur', 'change']}],
					projectAddress:[{type: 'string',required: true,message: '请选择项目地址',trigger: ['blur', 'change']}],
					receiverName:[{type: 'string',required: true,message: '请填写项目联系人',trigger: ['blur', 'change']}],
					projectTel:[{type: 'string',required: true,message: '请填写联系人电话',trigger: ['blur', 'change']}],
				},
				show:false,
				projectSourceShow:false,
				provinceShow:false,
				projectSourceOptions:[],
				provinceListOptions:[]
				
			}
		},
		onLoad(){
			console.log(this.$store.getters);
			this.form.userId=this.$store.getters.userid
			this.form.userName=this.$store.getters.name
			this.getProjectSource()
			this.getProvince()
		},
		onBackPress(){
			this.getValue()
		},
		methods:{
			getValueS(list){
				console.log(list,"B页面传递数据");
				this.form.customerId=list.id 
				this.form.customerName=list.name
				this.form.projectAddress=list.address
				this.form.receiverName=list.contactName
				this.form.projectTel=list.contactTelephone
			},
			back(){
				uni.redirectTo({
					url:'/pages/projectFiling/index'
				})
			},
			async addBtn(){
				console.log(this.form);
				// addProject
				const res=await	this.$refs.form.validate()
				if(res){
					this.BtnShow=true
					
				}
				
			},
			async BtnModel(){
				this.BtnShow=false
				const res1= await addProject(this.form)
				if(res1.code==200){
					this.$refs.uToast.show({
						type:'success',
						message:'添加成功！',
						complete(){
							uni.redirectTo({
								url:'/pages/projectFiling/index'
							})
						}
					})
				}
			},
			// provinceNameList
			getProvince(){
				provinceNameList().then(response=>{
					console.log(response);
					this.provinceListOptions.push(response.rows)
					 this.items=this.getList(response.rows)
					 console.log( this.provinceListOptions);
				})
			},
			getList(data){
				data.forEach((item)=>{
					// console.log(item);
					if(item.label){
						item.text=item.label
						delete item.label
					}
					if(item.children){
						this.getList(item.children)
					}
				})
				 return data
			},
			// 获取项目来源 
			getProjectSource(){
				getDicts('biz_project_source').then(response=>{
					this.projectSourceOptions.push(response.data)
				})
			},
			projectAddressBtn(){
				this.show=true
				this.$nextTick(()=>{
					this.$refs.pick.show()
				})
			},
			customerBtn(){
				uni.navigateTo({
					url:'/pages/dialog/customer'
				})
			},
			confirmFn(e){
				console.log(e);
				
				this.form.Source=e.value[0].dictLabel
				this.form.projectSource=e.value[0].dictValue
				this.projectSourceShow=false
			},
			// 选择项目地区域
			provinceConfirmFn(e){
				console.log(e);
				this.form.projectArea=e.value[0].text
				this.provinceShow=false
			},
			onchange(e){
				console.log(e);
				this.form.projectAddress=e.detail.value[0].text+e.detail.value[1].text+e.detail.value[2].text
			    this.show=false
			}
		}
	}
</script>

<style lang="scss">
	.form{
		padding: 0 10px 0 15px;
	}
	.box{
		width: 40px;
		padding-left: 20px;
		height: 22px;
	}
</style>